<template>
	<view id="body">
		<!-- 头部导航 -->
		<view class="header">
			<view class="header-box">
				<image class="touxiang" :src="img" mode=""></image>
			<view class="header-input uni-input">
				<!-- <icon type="search" /> -->
				<input placeholder="搜索商品名字" />
			</view>	
		</view>
		</view>
		<!-- 轮播图 -->
		<swiper indicator-dots="true" autoplay="true"  interval="2000" class="lunbo" >
			<swiper-item v-for="item in swiperimg" :key="item.Id" >
				<image :src="item.good_ImgUrl" @click="getSwiper(item.Id)"></image>
			</swiper-item>
		</swiper>
		<!-- 特价广告 -->
		<view class="hotTe">
			<text>&#8681;&#8681;&#8681;精品特价&#8681;&#8681;&#8681;</text>
		</view>
		<swiper class="tejia"  scroll-x="true" >
			<swiper-item>
				<view class="banner">
					<view class="created">
						<span class='tit'>限时特价结束时间</span>
						<span class="timer">
							<uni-countdown color="#FFFFFF" :day="d" :hour="h" :minute="m" :second="s" :show-day='false'>
							</uni-countdown>                
						</span>
					</view> 
					<view class="createdBox" v-for="item in commodity" :key="item.Id" @click="tejai(item.Id)">
						<view class="createdimg">
							<image :src="item.good_ImgUrl" style="margin:0"></image>
						</view>
						<view class="createdtext">
							<view>
								<text class="Title">{{item.good_Name}}</text>
							</view>
							<view class="jifen">
								<view class="leftFlex">
									<text class="del">{{item.good_DuiHuanJiFen}}积分</text>
									<view>
										<text class="kuchun">剩余{{item.good_HuoDongKuChun}}</text>
										<progress :percent="(1000-item.good_KuChun)/1000*100" activeColor="#f5ed16" backgroundColor="#fef8d8"></progress>
									</view>
								</view>
								<view class="rightFlex">
									<view>
										<text class="red">{{item.teJia_JiFen}}积分</text>
									</view>
									<view>
										<button @click="goDetails(item.Id)">立即兑换</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="baokuan">
			<text class="title">爆款兑换</text>
			<text class="jifen">当前积分:{{dangqianjifen}}</text>
		</view>
		<!-- 商品展示 -->
		<view class="Commodity" >
			<view class="box">
				<view class="box1" @click="Shop1(shangpinzhanshi[0].Id)">
					<p class="title">{{shangpinzhanshi[0].good_Name}}</p>
					<p class="jifen">{{shangpinzhanshi[0].good_DuiHuanJiFen}}</p>
					<image :src='shangpinzhanshi[0].good_ImgUrl'></image>
				</view>
				<view class="box2">
					<view class="box2-1" @click="Shop2(shangpinzhanshi[1].Id)">
						<view class="text">
							<p class="title">{{shangpinzhanshi[1].good_Name}}</p>
							<p class="jifen">{{shangpinzhanshi[1].good_DuiHuanJiFen}}</p>
						</view>
						<view >
							<image :src='shangpinzhanshi[1].good_ImgUrl'></image>
						</view>
					</view>
					<view class="box2-2" @click="Shop3(shangpinzhanshi[2].Id)">
						<view class="box2-2-1">
							<p class="title">{{shangpinzhanshi[2].good_Name}}</p>
							<p class="jifen">{{shangpinzhanshi[2].good_DuiHuanJiFen}}</p>
							<image :src='shangpinzhanshi[2].good_ImgUrl'></image>
						</view>
						<view class="box2-2-1" @click="Shop4(shangpinzhanshi[3].Id)">
							<p class="title">{{shangpinzhanshi[3].good_Name}}</p>
							<p class="jifen">{{shangpinzhanshi[3].good_DuiHuanJiFen}}</p>
							<image :src='shangpinzhanshi[3].good_ImgUrl'></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button  class="mini-btn" type="warn" @click="goKlae">更多</button>
	</view>
</template>

<script >
	import { useRouter } from 'vue-router'
	const router = useRouter();
	// 引入倒计时插件
	import uniCountdown from '@/uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue'
	export default {
		components:{uniCountdown},
		data(){
			return{
				swiperimg:[],
				commodity:[],
				d:31,
				h:0,
				m:0,
				n:0,
				s:0,
				name:'',
				img:'',
				dangqianjifen:56170,
				shangpinzhanshi:[{id:1},{id:2},{id:3},{id:4}],
			}
		},
		onLoad(){
			uni.getStorage({
				key: 'userInfo',
				success:  (res)=>{
					console.log(res);
					this.name = res.data
					uni.request({
						url: 'http://localhost:3001/selectJf', 
						method:'post',
						data:{
							userName:this.name
						},
						success: (res) => {
							this.dangqianjifen = res.data.data[0].jiFen
						}
					});
				}
			})
			uni.getStorage({
				key: 'userImg',
				success:  (res)=>{
					this.img = res.data
				}
			})
			this.init(),
			uni.request({
				url:'http://localhost:3001/allGoods',
				method:"GET",
				success:(res)=>{
					for(let i=0;i<4;i++){
						this.swiperimg.push(res.data.data[i])
					}
				},
			}),
			uni.request({
				url:'http://localhost:3001/Blockbuster',
				method:'GET',
				success:(res)=> {
					this.shangpinzhanshi=res.data.data
				}
			}),
			uni.request({
				url:'http://localhost:3001/Special',
				method:'GET',
				success:(res)=>{
					this.commodity=res.data.data
				}
			})
		},
		methods: {
			init(star){
				var date = new Date();
				var now = date.getTime();//获得当前时间与1970年1月1日时间相差的毫秒数
				var endDate = new Date(star); 
				var end = endDate.getTime();//结束时间与1970年1月1日时间相差的毫秒数
				var leftTime = end-now;//计算两日期之间相差的毫秒数
				if (leftTime >= 0) {
					this.d = Math.floor(leftTime/1000/60/60/24);
					this.h = Math.floor(leftTime/1000/60/60%24);  
					this.m = Math.floor(leftTime/1000/60%60);  
					this.s = Math.floor(leftTime/1000%60);
				}
			},
			getSwiper(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});  
			},
			tejai(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				}); 
			},
			Shop1(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});  
			},
			Shop2(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});  
			},
			Shop3(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});  
			},
			Shop4(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});  
			},
			goKlae(){
				wx.navigateTo({
					url: '/pages/klae/klae',
					fail:(res) =>{
						console.log(res)
					}
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'/pages/details/details?id=' + id
				});  
			}
		},
		
	}
</script>

<style lang='less'>
	#body{
		background: #fdfdfd;
	}
	.header {
		width: 100%;
		border: .0625rem #f78664 solid;
		height: 240rpx;
		background:linear-gradient(320deg, #F89945, #F7696E); 
		border-radius: 0rpx 0rpx 134px 134px / 0rpx 0rpx 40rpx 40rpx ;
		
	}
	.header-box{
		width: 100%;
		display: flex;
		align-content: flex-start;
		margin:40rpx 40rpx;
		
	}
	.touxiang{
		width: 80rpx;
		height: 80rpx;
		border: 1.6px white solid;
		border-radius: 60rpx;
		margin-right: 50rpx;
	}
	.header-input{
		width:320rpx;
		padding-left: 40rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 60rpx;
	}
	.header-input icon{
		height: 40rpx;
		width: 50rpx;
		margin-top: .75rem;
		box-sizing: border-box;
	}
	.header-input input{
		height: 80rpx;
		width: 240rpx;}
	.lunbo{
		width: 100%;
		height: 12.75rem;
		margin: -40px auto 0;
	}
	.hotTe{
		margin: 1rem auto;
		text-align: center;
		font-weight: 700;
		color: #F89945;
		font-size:1.2rem;
	}
	.tejia{
		width: 100%;
		height: 420rpx;
		.banner{
			background: #FFF;
			border: 1.6px  solid #F2F2F2;
			box-sizing: border-box;
			margin: 0 0.5rem;
			height: 100%;
			.created{
				display: flex;
				padding-top: 20rpx;
				.tit{
					font-weight: 700;
					padding:0  30rpx;
				}
			}
			.createdBox{
				width: 100%;
				height: 10.625rem;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				align-content: center;
				.createdimg image{
					width: 280rpx;
					height: 280rpx;
				}
				.createdtext{
					width: 11.875rem;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-around;
					.jifen{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: stretch;
						align-content: center;
						.leftFlex{
							display: flex;
							width: 7rem;
							flex-direction: column;
							justify-content: space-between;
							.del{
								text-decoration: line-through;
								color:#AAAAAA;
							}
							.kuchun{
								font-size: 0.75rem;
								color:#AAAAAA;
							}
						}
						.rightFlex{
							display:flex;
							flex-direction: column;
							align-items: center;
							align-content: center;
							.red{
								color: red;
							}
							button{
								font-size: 22rpx;
								color: #fff;
								background: #F89945;
							}
						}	
					}
				}
			}
		}
	}
	swiper-item image{
		width: 100%;
		height: 100%;
	}
	.baokuan{
		margin: 10rpx 0;
		padding-left: 40rpx;
		.title{
		font-weight: 700;
		margin-right: 40rpx;
		}
		.jifen{
			color: #AAAAAA;
		}
	}
	.Commodity{
		height: 420rpx;
		box-sizing: border-box;
		border: 1.6px  solid #F2F2F2;
		margin:0.5rem;
		background: #FFF;
		.box{
			padding: 0.625rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-content: center;
			.title{
				font-weight: 700;
				font-size: 20rpx;
				text-align: center;
			}
			.jifen{
				font-size: 14rpx;
				text-align: center;
			}
			.box1{
				box-sizing: border-box;
				image{
					width: 280rpx;
					height: 310rpx;
				}
				text{
					width: 280rpx;
					text-align: center;
				}
			}
		}
		.box2{
			display: flex;
			flex-wrap: wrap;
			.box2-1{
				width: 12.5rem;
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				.text{
					width: 120rpx;
					.title{
						margin:30rpx 0;
					}
				}
				image{
					width: 240rpx;
					height: 100%;
				}
			}
			.box2-2{
				width: 12.5rem;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				.box2-2-1{
					float: left;
					box-sizing: border-box;
					image{
						width: 140rpx;
						height: 140rpx;
						margin:0 20rpx;
					}
				}
			}
		}
	}
	.mini-btn{
		font-weight: 700;
	}
</style>
